<template>
  <div id="development">
    <div class="development_banner">
      <el-image style="width: 100%; height:400px; position: relative;top:-4px;" :src="bannerUrl" fit="fit"></el-image>
    </div>
    <el-row style="min-height:65px;margin-top:30px">
      <el-col :span="5">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="14">
        <div class="grid-content bg-purple">
          <CourseSearch></CourseSearch>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
    <el-row style="min-height:65px;margin-top:20px">
      <el-col :span="3">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="18">
        <div class="course">
          <div class="hot_course">学习课程
            <div style="display: inline-block;float: right;">
              <span style="font-size:14px;color: #606266;">筛选：</span>
              <el-radio v-model="filter" label="1">全部</el-radio>
              <el-radio v-model="filter" label="2">免费</el-radio>
              <el-radio v-model="filter" label="3">会员</el-radio>
              <el-radio v-model="filter" label="4">付费</el-radio>
            </div>

          </div>
          <el-divider></el-divider>
          <div class="course_item" @click="goCourse">
            <el-image
                src="https://s0.lgstatic.com/i/image6/M01/58/F5/Cgp9HWFC18mAO7D-AAGaew0BPXY393.png"
                fit="fit"></el-image>
            <div class="title">24讲吃透分布式数据库</div>
            <div class="teacher"><span>陈磊</span> <span>前京东测试架构师</span></div>
            <div class="course_item_bottom"><span style="color:#ff7452;font-weight:600;">￥</span><span
                class="price">89</span><span class="number">3222人购买</span></div>
            <span v-show="coursePay"  class="badge">
               免费课程
            </span>
          </div>
          <div class="course_item">
            <el-image
                src="https://s0.lgstatic.com/i/image6/M01/58/F5/Cgp9HWFC18mAO7D-AAGaew0BPXY393.png"
                fit="fit"></el-image>
            <div class="title">24讲吃透分布式数据库</div>
            <div class="teacher"><span>陈磊</span> <span>前京东测试架构师</span></div>
            <div class="course_item_bottom"><span style="color:#ff7452;font-weight:600;">￥</span><span
                class="price">89</span><span class="number">3222人购买</span></div>
          </div>
          <div class="course_item">
            <el-image
                src="https://s0.lgstatic.com/i/image6/M01/58/F5/Cgp9HWFC18mAO7D-AAGaew0BPXY393.png"
                fit="fit"></el-image>
            <div class="title">24讲吃透分布式数据库</div>
            <div class="teacher"><span>陈磊</span> <span>前京东测试架构师</span></div>
            <div class="course_item_bottom"><span style="color:#ff7452;font-weight:600;">￥</span><span
                class="price">89</span><span class="number">3222人购买</span></div>
          </div>
          <div class="course_item">
            <el-image
                src="https://s0.lgstatic.com/i/image6/M01/58/F5/Cgp9HWFC18mAO7D-AAGaew0BPXY393.png"
                fit="fit"></el-image>
            <div class="title">24讲吃透分布式数据库</div>
            <div class="teacher"><span>陈磊</span> <span>前京东测试架构师</span></div>
            <div class="course_item_bottom"><span style="color:#ff7452;font-weight:600;">￥</span><span
                class="price">89</span><span class="number">3222人购买</span></div>
          </div>
          <div class="course_item">
            <el-image
                src="https://s0.lgstatic.com/i/image6/M01/58/F5/Cgp9HWFC18mAO7D-AAGaew0BPXY393.png"
                fit="fit"></el-image>
            <div class="title">24讲吃透分布式数据库</div>
            <div class="teacher"><span>陈磊</span> <span>前京东测试架构师</span></div>
            <div class="course_item_bottom"><span style="color:#ff7452;font-weight:600;">￥</span><span
                class="price">89</span><span class="number">3222人购买</span></div>
          </div>
          <div class="course_item">
            <el-image
                src="https://s0.lgstatic.com/i/image6/M01/58/F5/Cgp9HWFC18mAO7D-AAGaew0BPXY393.png"
                fit="fit"></el-image>
            <div class="title">24讲吃透分布式数据库</div>
            <div class="teacher"><span>陈磊</span> <span>前京东测试架构师</span></div>
            <div class="course_item_bottom"><span style="color:#ff7452;font-weight:600;">￥</span><span
                class="price">89</span><span class="number">3222人购买</span></div>
          </div>
          <div class="course_item">
            <el-image
                src="https://s0.lgstatic.com/i/image6/M01/58/F5/Cgp9HWFC18mAO7D-AAGaew0BPXY393.png"
                fit="fit"></el-image>
            <div class="title">24讲吃透分布式数据库</div>
            <div class="teacher"><span>陈磊</span> <span>前京东测试架构师</span></div>
            <div class="course_item_bottom"><span style="color:#ff7452;font-weight:600;">￥</span><span
                class="price">89</span><span class="number">3222人购买</span></div>
          </div>
          <div class="course_item">
            <el-image
                src="https://s0.lgstatic.com/i/image6/M01/58/F5/Cgp9HWFC18mAO7D-AAGaew0BPXY393.png"
                fit="fit"></el-image>
            <div class="title">24讲吃透分布式数据库</div>
            <div class="teacher"><span>陈磊</span> <span>前京东测试架构师</span></div>
            <div class="course_item_bottom"><span style="color:#ff7452;font-weight:600;">￥</span><span
                class="price">89</span><span class="number">3222人购买</span></div>
          </div>
          <div class="course_item">
            <el-image
                src="https://s0.lgstatic.com/i/image6/M01/58/F5/Cgp9HWFC18mAO7D-AAGaew0BPXY393.png"
                fit="fit"></el-image>
            <div class="title">24讲吃透分布式数据库</div>
            <div class="teacher"><span>陈磊</span> <span>前京东测试架构师</span></div>
            <div class="course_item_bottom"><span style="color:#ff7452;font-weight:600;">￥</span><span
                class="price">89</span><span class="number">3222人购买</span></div>
          </div>
          <div class="course_item">
            <el-image
                src="https://s0.lgstatic.com/i/image6/M01/58/F5/Cgp9HWFC18mAO7D-AAGaew0BPXY393.png"
                fit="fit"></el-image>
            <div class="title">24讲吃透分布式数据库</div>
            <div class="teacher"><span>陈磊</span> <span>前京东测试架构师</span></div>
            <div class="course_item_bottom"><span style="color:#ff7452;font-weight:600;">￥</span><span
                class="price">89</span><span class="number">3222人购买</span></div>
          </div>
          <div class="course_item">
            <el-image
                src="https://s0.lgstatic.com/i/image6/M01/58/F5/Cgp9HWFC18mAO7D-AAGaew0BPXY393.png"
                fit="fit"></el-image>
            <div class="title">24讲吃透分布式数据库</div>
            <div class="teacher"><span>陈磊</span> <span>前京东测试架构师</span></div>
            <div class="course_item_bottom"><span style="color:#ff7452;font-weight:600;">￥</span><span
                class="price">89</span><span class="number">3222人购买</span></div>
          </div>
          <div class="course_item">
            <el-image
                src="https://s0.lgstatic.com/i/image6/M01/58/F5/Cgp9HWFC18mAO7D-AAGaew0BPXY393.png"
                fit="fit"></el-image>
            <div class="title">24讲吃透分布式数据库</div>
            <div class="teacher"><span>陈磊</span> <span>前京东测试架构师</span></div>
            <div class="course_item_bottom"><span style="color:#ff7452;font-weight:600;">￥</span><span
                class="price">89</span><span class="number">3222人购买</span></div>
          </div>
          <div class="course_item">
            <el-image
                src="https://s0.lgstatic.com/i/image6/M01/58/F5/Cgp9HWFC18mAO7D-AAGaew0BPXY393.png"
                fit="fit"></el-image>
            <div class="title">24讲吃透分布式数据库</div>
            <div class="teacher"><span>陈磊</span> <span>前京东测试架构师</span></div>
            <div class="course_item_bottom"><span style="color:#ff7452;font-weight:600;">￥</span><span
                class="price">89</span><span class="number">3222人购买</span></div>
          </div>
          <div class="course_item">
            <el-image
                src="https://s0.lgstatic.com/i/image6/M01/58/F5/Cgp9HWFC18mAO7D-AAGaew0BPXY393.png"
                fit="fit"></el-image>
            <div class="title">24讲吃透分布式数据库</div>
            <div class="teacher"><span>陈磊</span> <span>前京东测试架构师</span></div>
            <div class="course_item_bottom"><span style="color:#ff7452;font-weight:600;">￥</span><span
                class="price">89</span><span class="number">3222人购买</span></div>
          </div>
          <div class="course_item">
            <el-image
                src="https://s0.lgstatic.com/i/image6/M01/58/F5/Cgp9HWFC18mAO7D-AAGaew0BPXY393.png"
                fit="fit"></el-image>
            <div class="title">24讲吃透分布式数据库</div>
            <div class="teacher"><span>陈磊</span> <span>前京东测试架构师</span></div>
            <div class="course_item_bottom"><span style="color:#ff7452;font-weight:600;">￥</span><span
                class="price">89</span><span class="number">3222人购买</span></div>
          </div>
          <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              align="center"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pageSize"
              :hide-on-single-page="value"
              style="padding-top: 15px"
          >
          </el-pagination>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import development from "@/assets/img/development.png";
import CourseSearch from "@/components/common/CourseSearch";

export default {
  name: "Development",
  components: {CourseSearch,},
  data() {
    return {
      bannerUrl: development,
      filter: '1',
      value: false,
      currentPage: 1,
      total: 1000,
      pageSize: 31,
      coursePay:'true'
    }
  },
  methods: {
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    goCourse(){
      this.$router.push({name:'course',params:{courseId:''}});
    }
  }
}
</script>

<style scoped>
.banner {
  height: 400px;
}

.grid-content {
  min-height: 50px;
  color: white;
  font-size: 14px;
}

.hot_course {
  font-size: 24px;
  color: #100f0f;
  height: 60px;
  line-height: 60px;
  text-align: left;
}

.el-divider--horizontal {
  margin: 0 16px 20px 0;
  width: 98%;
}

.el-radio {
  margin-right: 22px;
}

.course_item {
  display: inline-block;
  margin: 0 16px 16px 0;
  background-color: white;
  width: 362px;
  height: 275px;
  cursor: pointer;
  position: relative;
}
.badge{
  position: absolute;
  width: 56px;
  height: 24px;
  padding-left: 5px;
  top: 15px;
  left: -5px;
  font-size: 12px;
  color: #fff;
  line-height: 20px;
  background:url(../../assets/img/schoolTag.png)
}
.title {
  color: #333;
  font-size: 18px;
  font-weight: 700;
  margin: 5px 16px 5px;
}

.teacher {
  color: #999;
  font-size: 14px;
  margin: 0 16px 5px;
}

.course_item_bottom {
  margin: 0 16px 5px;
  line-height: 30px;
}

.price {
  font-size: 24px;
  font-weight: 600;
  color: #ff7452;
}

.number {
  line-height: 40px;
  float: right;
  color: #999;
  font-size: 12px;
}

/deep/ .el-pagination.is-background .el-pager li {
  background-color: white;
}

/deep/ .el-pagination.is-background .btn-next {
  background-color: white;
}

/deep/ .el-pagination.is-background .btn-prev {
  background-color: white;
}
</style>